<template>
    <div>
    <setHeader :title="headerTitle"></setHeader>
    <div class="content" style="margin-bottom: 0;">
        <!-- <div>
            <div class="el-main-revie bindInput">
              <mt-search 
                autofocus 
                v-model="value"
                cancel-text=""
                placeholder="搜索"
                >
                <mt-cell
                  v-for="(item,index) in defaultResult"
                  :key="index"
                  :value="item.name"
                  @click.native="getSelect(item.name)"
                  >
                </mt-cell>
              </mt-search>
              <div style="display:none;" :model="seac"></div>
            </div>
        </div> -->
        <div>
            <div class="header_search clear">
                <input class="header_icon_search_text searchInp" v-model="search" type="text" placeholder="搜索" v-if="searchFocus" v-focus autofocus="autofocus"/>
                <div class="searchBtn" @click="searchIn" style="color: #999;" v-if="searchInput">
                    <!-- <input class="header_icon_search_text searchInp" type="text" placeholder="搜索"> -->
                    <span class="search_span">
                        <i class="iconfont icon-sousuo search_iconfont"></i> 
                        <span style="display: inline-block; vertical-align: top;">搜索</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="main-index member-search">
            <!-- 小方形头像 -->
            <div class="small_square">
                <!-- <div style="font-size: 0.3rem; color: rgb(102, 102, 102); line-height: 0.5rem;height: 0.5rem;margin: 0.4rem 0;" v-if="defaultResult == ''">
                    暂无数据  ╮(￣▽￣)╭
                </div> -->
                <div v-if="defaultResult == ''" class="contentEmpty" style="margin-top: 1.2rem;">
                    <img src="../common/images/Disappointment.png" alt="">
                    <em>暂无查询结果</em>
                </div>
                <ul class="small_soc" v-else>
                    <li v-for="(list,ind) in defaultResult" @click="JumpcompanyInfo(list.id)" :key="ind">
                        <img :src="list.log_img" v-if="list.log_img != null"/>
                        <img src="../common/images/youquan.png" v-else/>
                        <span>{{list.name}}</span>
                    </li>
                    <!-- <li class="add_active">
                        <img src="../common/images/jia.png"/>
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
    <!-- <searchPanel v-if="searchShow" @done="comback"></searchPanel> -->
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
// import searchPanel from '../public/search-panel.vue';
    export default {
        data() {
            return {
                headerTitle: '协会成员',
                value:'',
                name:'',
                defaultResult: '',
                seac:'1',

                // CompanyList:[
                //     {name: '耐思智慧'}
                // ],
                search: '',
                searchInput: true,
                searchBtnFlag: true,
                items: [],
                cid:'',
                searchFocus: false,
            }
        },
        components: {
            setHeader,
            // searchPanel
        },
        directives: {
            focus: {
                inserted: function(el) {
                    console.log('有没有', el);
                        el.focus();
                }
            }
            
        },
        mounted() {
            // let that = this;
            //获取当前圈子的企业
            // that.getUserEnterprise();
            
            this.cid = this.$route.query.cid;
            this.searchCompany();
        },
        watch:{
            search:function(msg){
                let that = this
                that.name = msg
                console.log(msg)
                that.searchCompany(msg)
                if(msg != '') {
                    that.searchInput = false;
                    that.searchFocus = true;
                }else {
                    that.searchInput = true;
                    that.searchFocus = false;
                }
            },
            // search(value) {
            //     if(value != '') {
            //         this.searchInput = false;
            //     //   this.clearShow = true;
            //     //   this.search_intop = 'background-color: transparent; z-index: 0;'
            //     }else {
            //         this.searchInput = false;
            //     //   this.clearShow = false;
            //     //   this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);'
            //     }
            // }
        },
        methods: {
            // comback() {
            //     this.searchShow = false;
            // },
            
            //点击出现输入框
            searchIn(){
                this.searchInput = false;
                this.searchFocus = true;
                // this.searchBtnFlag = !this.searchBtnFlag;
                // this.$nextTick(function () {
                //     //DOM 更新了
                //     this.$refs.inputVal.focus();
                // })
                // this.searchShow = true;
            },
            // checkName() {
            //     this.searchShow = true;
            // },
            //获取圈子中的企业
            // getUserEnterprise:function(){
            //     let that = this;
            //     let cid = this.cid;

            //     this.$fetch(that.$path+'/api.php/Circle/getCircleCompanyList',{cid:cid})
            //     .then((res) => {
            //         that.CompanyList = res.data.list;
            //     })
            // },

            //点击企业跳转到企业主页
            JumpcompanyInfo(cpId){
                if(this.$system != 'ios'){
                    this.$router.push({path: '/userCenter/companyIndex', query: {cp_id: cpId}}); 
                }else{
                    window.location.href = '/userCenter/companyIndex?cp_id=' + cpId;
                }       
            },

            searchCompany:function(msg){
                let that = this;
                let seac = that.seac;
                if(seac == 0){
                    // document.getElementsByClassName("mint-search-list-warp")[0].style.display = 'none'
                    that.seac = 1
                }else{
                    console.log(33);
                    console.log(33,msg);
                let _val = that.value;
                this.$fetch(that.$path+'/api.php/company/getExistCompany',{cid:that.cid,name:msg}).then((res) => {
                    console.log('改改',res.data)
                    if(res.code == 200){
                        console.log(res.data)
                        // document.getElementsByClassName("mint-search-list-warp")[0].style.display = ''
                        that.defaultResult = res.data
                    }else{
                        that.defaultResult = [];
                    }
                });
                }
            },
            // 选择
            getSelect(name) {
                console.log(999)
                // document.getElementsByClassName("mint-search-list-warp")[0].style.display = 'none'
                this.value = name;
                this.seac = 0;
            },
            // 点击搜索框出现可编辑搜索框
            // openSearch() {
            //     this.searchShow = true;
            // }
        },
        // computed: {
        //     //过滤方法
        //   CompanyList: function() {
        //     let that = this;
        //       var _search = that.search;
        //       if (_search) {
        //           //不区分大小写处理
        //           var reg = new RegExp(_search, 'ig')
        //           //es6 filter过滤匹配，有则返回当前，无则返回所有
        //           return that.items.filter(function(e) {
        //               //匹配所有字段
        //               return Object.keys(e).some(function(key) {
        //                   let data = e.name + e.description + e.admin_job;
        //                   return data.match(reg);
        //               })
        //               //匹配某个字段
        //               //  return e.name.match(reg);
        //           })
        //       };
        //       return that.items;
        //   }
        // },  
    }
</script>

<style>
/* 搜索框 */
.bindInput .mint-searchbar {
    background-color: #e50838;
    height: 0.88rem;
}
.bindInput .mint-searchbar-inner {
    border-width: 0px;
    position: absolute;
    width: 7.1rem;
    height: 0.54rem;
    line-height: 0.54rem;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.bindInput .mint-searchbar-inner .mintui-search{
    position: absolute;
    left: 50%;
    margin-left: -0.8rem;
    font-size: 0.3rem;
    color: #999;
}
.bindInput .mint-searchbar-core{
    text-align: center;
}
.searchpanel {
    width: 100%; 
    height: 100%; 
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.member-search {
    margin-top: 1.2rem;
}
.member-search .add_active {
    width: 1rem;
    height: 1rem;
    background-color: #f2f2f2 !important;
    border-radius: 4px;
    margin-bottom: 0.4rem;
}
.member-search .add_active img {
    height: 0.4rem !important;
    width: 0.4rem !important;
    margin: 0.28rem;
    vertical-align: super;
}

/* 搜索框 */
.searchBtn .search_span {
    width: 96%;
    display: block;
    background-color: #fff;
    height: 0.54rem;
    line-height: 0.54rem;
    border-radius: 4px;
    margin: 0 auto;
    top: 0.2rem;
    position: absolute;
    z-index: 23;
    right: 0;
    left: 0;
}
</style>